<template>
  <div class="m-content">
    <h2>欢迎来到仁川</h2>
    <div class="demo-basic--circle">
      <el-avatar :size="50" :src="user.avatar"></el-avatar>
      <div>{{user.username}}</div>
    </div>
    <div class="m-divider">
      <span><el-link type="success" href="/blog/all">主页</el-link></span>
      <el-divider direction="vertical"></el-divider>
      <span><el-link type="warning" href="/blog/add">发表博客</el-link></span>
      <el-divider direction="vertical"></el-divider>
      <span v-show="!haslogin"><el-link  type="success" href="/login">登录</el-link></span>
      <span v-if="haslogin"><el-link type="primary" @click="logout">退出</el-link></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      user:{
        username:'请登录',
        avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        
      },
      haslogin:false
    }
  },
  methods:{
    logout:function () {
      //这是jwt无状态的，不是session的，可以不用后端处理，前端删除local storage中的认证信息就好，
      //如果是session存储，就需要传到后端，对redis中的session进行处理
      const _this =this;
      _this.$axios.get('/logout', {headers: {'Authorization':localStorage.getItem('token')}})
          .then(resp=>{
            _this.$store.commit("REMOVE_USERINFO");
            _this.$router.push('/login')
          }
      )
    },
    
  },
  // 创建页面时执行的方法,如果有用户登录的话，就给页面中动态赋值
  created() {
    if (this.$store.getters.getUserInfo.username){
      this.user.username=this.$store.getters.getUserInfo.username;
      this.user.avatar=this.$store.getters.getUserInfo.avatar
      this.haslogin=true
    }
  }
}
</script>

<style scoped>
.m-content{
  max-width:960px;
  margin: 0 auto;
  text-align: center;
}
.m-divider{
  
}

</style>